<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>团扇结构</title>
    <link rel="stylesheet" href="../css/all.css" />
    <script src="../js/echart.min.js"></script>
    <style>
      .container {
        display: flex;
        align-items: center;
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 100vh;
        background-image: url("../img/bac1.png");
        background-size: cover;
      }

      li::marker {
        display: none;
      }
      li {
        list-style-type: none;
      }
      .header {
        height: 20%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        z-index: 10;
        justify-content: space-around;
        /* background-color: #008c8c; */
      }
      .header-left {
        display: flex;
        width: 80%;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
        background-image: url("../img/introduce/zuzi.png");
        background-size: 30% 100%;
        background-position: 0%;
        background-repeat: no-repeat;
        padding-left: 30px;
        z-index: 3;
      }
      .logo {
        background-image: url("../img/introduce/logo.png");
        background-size: 198% 360%;
        background-repeat: no-repeat;
        width: 60px;
        height: 55px;
        background-position: 50% 70%;
        cursor: pointer;
        /* background-color: aqua; */
      }
      /* 头部 */
      .title {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 3.3em;
        font-family: font3;
        color: #789a89;
        padding-left: 14px;
        z-index: 1;
      }
      .header-right {
        display: flex;
        width: 18%;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 23px;
      }
      .header-right > ul {
        display: flex;
        height: 10%;
        width: 15%;
        list-style-type: none;
      }
      .header-right > ul > li {
        position: relative;
        font-family: font3;
        transition: all 0.5s ease;
        height: auto;
        font-size: 2.3em;
        font-weight: bold;
        padding-left: 24px;
        color: #8f3536;
        cursor: pointer;
      }
      .header-right > ul > li.active {
        color: #83a795;
      }
      .header-right > ul > li > a {
        text-decoration: none; /* 取消下划线 */
        color: inherit; /* 继承父元素的文字颜色 */
        cursor: pointer; /* 鼠标悬停时显示手型 */
      }
      .header-right > ul > li:hover {
        transition: all 0.5s ease;
        color: #83a795;
      }
      .header-right > ul > li:not(:first-child)::after {
        content: "";
        width: 4px;
        height: 50px;
        left: 7px;
        position: absolute;
        top: 15px;
        background-color: #8f3536;
      }
      .main {
        display: flex;
        height: 80%;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        transition: all 0.5s ease;
        opacity: 1;
        align-items: flex-start;
        /* background-color: #789a89; */
        position: relative;
        margin-top: -20px;
        opacity: 0;

        align-items: center;
      }
      .main.active {
        opacity: 0;
      }
      .main-box {
        display: flex;
        position: relative;
        justify-content: flex-end;
        align-items: flex-start;
        width: 80%;
        height: 100%;
        /* background-color: #789a89; */
      }
      .main-left {
        width: 50%;
        height: 90%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        /* background-color: #8f3536; */
        margin-top: 30px;
      }
      .main-right {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 95%;
        /* background-color: antiquewhite; */
      }
      .leftTextBox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        height: 90%;
        margin-right: 40px;
        box-sizing: border-box;
        /* background-color: #789a89; */
        border: 5px solid rgb(143, 53, 54, 0.8);
        border-radius: 5px;
      }
      .main-text-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 99%;
        height: 99%;
        box-sizing: border-box;
        border: 3px solid #af7a74;
        border-radius: 2px;
        /* background-color: #8f3536; */
        background-image: url(../img/bac2.jpg);
        background-color: #faebd7;

        background-size: 300%;
        background-position: 60% 50%;
      }
      .maindetail {
        display: flex;
        flex-direction: column;
        width: 95%;
        height: 100%;
        font-family: font3;
        font-size: 3.8em;
        align-items: center;
        justify-content: flex-end;
        /* background-color: #789a89; */
      }
      .detail-title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 13%;
        color: #8f3536;
        border-bottom: 3px solid #8f3536;
        font-weight: bold;
        margin-bottom: 10px;
        /* background-color: #25c977; */
      }
      .detail-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-indent: 2em;
        padding: 10px;
        width: 100%;
        height: 73%;
        font-size: 0.5em;
        overflow: auto;
        /* background-image: url(../img/bac2.jpg); */
        background-size: 100% 100%;
        background-position: 100% 100%;

        background-color: rgb(250, 235, 215, 0.6);
      }
      .detail-body > span {
        text-align: left;
        /* display: none; */
        /* opacity: 0; */
        transition: all 0.5s ease;
      }
      .detail-body > span > p {
        color: #8f3536;
        display: inline;
        font-size: 1.1em;
      }
      .detail-body > span:nth-child(1) {
        opacity: 0;
      }
      .detail-body > span:nth-child(2) {
        opacity: 0;
        transform: translateY(-192%);
      }
      .detail-body > span:nth-child(3) {
        opacity: 0;
        transform: translateY(-208%);
      }

      .detail-body > span:nth-child(4) {
        opacity: 0;
        transform: translateY(-362.5%);
      }
      .detail-body > span:nth-child(5) {
        opacity: 0;
        transform: translateY(-430%);
      }
      .detail-body > span.active {
        display: block;
        opacity: 1;
      }
      .detail-body::-webkit-scrollbar {
        display: none;
      }

      .detail-footer {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 12%;
        align-items: flex-end;
        /* background-color: #1a2ad7; */
      }

      .show-btn {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        /* background-color: #741939;/ */
        justify-content: center;
        align-items: flex-end;
        cursor: pointer;
        overflow: hidden; /* 隐藏超出部分 */
        background-image: url(../img/anniu2.png);
        background-size: 80% 115%;
        background-position: 50% -90%;
        transform: scaleY(90%);
        background-repeat: no-repeat;
        color: #8f3536;
        font-size: 0.6em;
      }
      .show-btn > img {
        /* width: 100%; */
        /* height: 100%; */
      }
      .chat-tip {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: -35%;
        transform: translateY(110%);
        font-size: 0.6em;

        color: #a45b5b;
        animation: floatAnimation3 2s infinite ease-in-out;
      }
      .img-container {
        width: 55%;
        height: 100%;
        /* background-color: #741939; */
        position: relative;
        left: 10%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
      .img-container > img {
        width: 100%;
        height: 100%;
        transform: translateY(-5%) rotate(-1deg);
      }
      .area-box {
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #741939; */
        position: absolute;
      }
      .area-container {
        display: flex;
        width: 100%;
        height: 100%;
        position: relative;
      }
      .area {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        transition: all 0.5s ease;
        font-size: 3em;
        font-weight: bold;

        color: #8aac9a;

        /* background-color: #741939; */
      }
      .area.active {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        transition: all 0.5s ease;
        font-size: 3em;
        font-weight: bold;

        color: #8f3536;

        /* background-color: #741939; */
      }
      .area1 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        left: 15%;
        top: 5%;
        font-size: 3em;
        font-weight: bold;

        /* background-color: #741939; */
      }
      .area-left {
        display: flex;
        justify-content: center;
        width: "90%";

        animation: floatAnimation 2s infinite ease-in-out;
      }
      .area-left.active {
        display: flex;
        justify-content: center;
        width: "90%";
        transition: all 0.5s ease;
        color: #8f3536;
        animation: floatAnimation 2s infinite ease-in-out;
      }
      .area-right {
        display: flex;
        width: 10%;
        height: 35%;
        /* background-color: rgb(241, 227, 197, 0.8); */
        background-color: #f9d9a3;
        border-radius: 100%;
        transition: all 0.5s ease;
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
          background-color: #8f3536;
        }
        50% {
          transform: scale(1.5);
          opacity: 0.6;
          background-color: rgb(213, 152, 139, 0.7);
        }

        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      .area-right:hover {
        transition: all 0.5s ease;
        cursor: pointer;
        background-color: #8f3536;
      }

      .area2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        left: 2%;
        top: 20%;
        font-size: 3em;
        font-weight: bold;

        /* background-color: #741939; */
      }
      .area3 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        right: 7%;
        bottom: 35%;
        font-size: 3em;
        font-weight: bold;

        /* background-color: #741939; */
      }
      .area4 {
        display: flex;
        /* flex-direction: row-reverse; */
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        left: 23%;
        bottom: 18%;
        font-size: 3em;
        font-weight: bold;

        /* background-color: #741939; */
      }
      .area5 {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        height: 10%;
        width: 40%;
        font-family: font3;
        position: absolute;
        right: 5%;
        bottom: 8%;
        font-size: 3em;
        font-weight: bold;

        /* background-color: #741939; */
      }
      /* 人物 */
      .people {
        position: absolute;
        display: flex;
        background-image: url(../img/people/精灵-0.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 20%;
        height: 50%;
        max-width: 391px;
        max-height: 350px;
        bottom: 2%;
        left: 2%;
        z-index: 20;
        opacity: 0.6;
        transition: all 0.5s ease;
      }
      .people.active {
        opacity: 0.6;
      }

      @keyframes floatAnimation {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-2px);
        }
        100% {
          transform: translateY(0);
        }
      }
      @keyframes floatAnimation2 {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
        100% {
          transform: translateY(0);
        }
      }

      @keyframes floatAnimation3 {
        0% {
          transform: translateY(165%) translateY(0);
        }
        50% {
          transform: translateY(165%) translateY(-5px);
        }
        100% {
          transform: translateY(165%) translateY(0);
        }
      }
      .chart {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        position: absolute;
        transition: all 0.5s ease;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) scale(0.1);
        bottom: 50%;
        opacity: 0;
        z-index: -1;
        /* background-color: #8f3536; */
      }
      .chart.active {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
        z-index: 2;
      }
      .chart-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 95%;
        /* background-color: #2e2733; */
        background-image: url(../img/bac1.png);
      }
      .chart-box {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: flex-start;
        width: 90%;
        transform: scale(0.95);
        transform: translateY(-4%);
        height: 100%;
      }
      .chart-box > div {
        transform: translateY(10%);
        width: 100%;
        height: 100%;
      }
      .tips {
        display: flex;
        /* width: 100%; */
        justify-content: center;
        align-items: center;
        font-family: font3;
        font-size: 3em;
        width: 20%;
        height: 20%;
        transition: all 0.5s ease;
        color: #839289;
        /* background-color: #830bd9; */
        animation: floatAnimation2 2s infinite ease-in-out;
      }
      .tips:hover {
        cursor: pointer;
        color: #934845;
      }
      /* 竹子 */
      .zuzi {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 73% 100%;
        transform: rotate(10deg) translateX(10%);
        z-index: 3;
      }
      .zuzi2 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 210% 120%;
        background-position: 95% 100%;
        transform: rotate(-24deg);
        z-index: 3;
      }
      .zuzi3 {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 10%;
        height: 50%;
        right: 0;
        background-image: url("../img/introduce/zuzixia.png");
        background-size: 240% 120%;
        background-position: 85% 100%;
        transform: rotate(0deg);
        z-index: 3;
      }
      /* 切换按钮 */
      .lef-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        left: 0;
        transform: rotate(50deg) translateX(-60%);
        top: 45%;
        cursor: pointer;
        opacity: 0.7;
        z-index: 20;
        transition: all 0.5s ease;
      }
      .lef-btn > img {
        width: 100%;
      }
      .lef-btn:hover {
        opacity: 1;
      }
      .right-btn {
        display: flex;
        justify-content: center;
        width: 11%;
        position: absolute;
        right: 0;
        transform: rotate(-65deg) translateY(40%);
        z-index: 10;
        top: 43%;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.5s ease;
      }
      .right-btn:hover {
        opacity: 1;
      }
      .right-btn > img {
        width: 100%;
      }
      /* 鼠标跟随 */
      #follower {
        position: absolute;
        z-index: 999;
        transition: transform 0.1s ease;
        width: 20px;
        height: 20px;

        background-color: rgba(212, 38, 38, 0.4);
        position: absolute;
        border-radius: 50%; /* 将方形 div 变成圆形 */
        pointer-events: none;
      }
      /* 按钮 */
      .right-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
      .right-arr {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        position: absolute;
        z-index: 10;
        left: 7%;
        opacity: 0;
        top: 9%;
        transform: scaleX(-1) scaleX(100%) scaleY(70%) rotate(-20deg);
        cursor: pointer;
        transition: all 0.5s ease;
      }
      .left-btn {
        display: flex;
        justify-content: center;
        width: 25%;
        height: 25%;
        top: 10%;
        transform: scaleX(100%) scaleY(70%);
        position: absolute;
        cursor: pointer;
        opacity: 0;
        transition: all 0.5s ease;
      }
      .lef-btn:hover > img:nth-child(2) {
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="follower"></div>
      <div class="header">
        <div class="header-left">
          <div class="logo"></div>
          <div class="title">
            <span>团扇结构</span>
          </div>
        </div>
        <div class="header-right">
          <ul>
            <li><a href="./introduce.html">初识</a></li>
            <li><a href="./area.html">远溯</a></li>
            <li><a href="./means.html">览境</a></li>
            <li class="active"><a href="">匠艺</a></li>
          </ul>
        </div>
      </div>
      <div class="main">
        <div class="main-box">
          <div class="main-left">
            <div class="leftTextBox">
              <div class="main-text-box">
                <div class="maindetail">
                  <div class="detail-title">扇面</div>
                  <div class="detail-body">
                    <span class="active">
                      <p>扇面</p>
                      是团扇的主体部分，通常其上予花纹，诗词等作为装饰，需质地耐用，易于保存。

                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <p>常见材料：</p>
                      缂丝、绫、罗、刺绣、真丝、欧根纱、宣纸七大面料

                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>缂丝:</p>
                      又称“刻丝”，中国传统丝绸艺术品中的精华。皇家御用织物之一，常用以织造帝后服饰和摹缂名人书画。有“一寸缂丝一寸金”和“织中之圣”之称
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>罗：</p>
                      运用罗绸织法使织物表面具有纱空眼的花素织物统称罗类丝绸。它是纯蚕丝织物，特点是面料风格雅致，质地紧密，结实，纱孔通风，透凉。

                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>刺绣：</p>
                      刺绣是针线在织物上绣制的各种装饰图案的总称,分丝线刺绣和羽毛刺绣两种,就是用针将丝线或其他纤维、纱线以一定图案和色彩在绣料上穿刺，以绣迹构成花纹的装饰织物。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>宣纸：</p>
                      宣纸是中国传统的古典书画用纸，是中国传统造纸工艺之一,"始于唐代、产于泾县",因唐代泾县隶属宣州管辖，故因地得名宣纸,有易于保存，经久不脆，不会褪色等特点，有“纸寿千年”之誉,原材料主要是青檀，配料是稻草等农产品
                      纸张洇墨程度分为生宣、半熟宣和熟宣,熟宣又分蜡宣、矾宣、色宣、色矾宣等百余种。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>真丝：</p>
                      真丝一般指蚕丝，被称为“纤维皇后”，由蚕改粘液凝固而成，是唯一得到实际应用的天然长丝纤维。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>绫：</p>
                      中国传统丝织物的一类.按原料分为有纯桑蚕丝织品、合纤织品和交织品。类织物的地纹是各种经面斜纹组织或以经面斜纹组织为主，混用其它组织制成的花素织物，常见的绫类织物品种有花素绫、广绫、交织绫、尼棉绫等。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>欧根纱：</p>
                      欧根纱是通过将锦纶或涤纶母丝通过加弹假捻加工，而后分丝制备而成的一种毛感单丝，亦叫格林纱。质地透明或半透明的轻纱，多覆盖于缎布或丝绸上面。婚纱多用欧根纱为主要原料。
                    </span>
                    <span>
                      <p>扇框</p>
                      包含着扇面，需要稳固且与扇面相衬。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <p>常见材料：</p>
                      木材、竹子、玉石、象牙、贝壳、金属、塑料。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;

                      <p>木材：</p>
                      传统的团扇扇框通常由木材制成，常见的木材包括樟木、榉木、楠木等。这些木材质地坚硬，适合用于雕刻和加工，可以制作出稳固而精美的扇框结构。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;

                      <p>竹子：</p>
                      在一些地区，特别是中国和日本，团扇的扇框常常采用竹子制作。竹子轻巧、坚韧，且有天然的美感，适合用于制作扇框，并且能够与扇面相得益彰，形成一种优雅的整体
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>金属：</p>
                      现代的团扇扇框有时也会采用金属材料，如铜、铝等。金属扇框可以提供更加坚固的结构，同时还能赋予扇子一种现代感和工艺感。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>塑料：</p>
                      一些廉价或者大批量生产的团扇扇框可能会采用塑料材料制作。塑料扇框通常轻便、耐用，适合作为日常使用的扇子，但相比于木材或金属，可能会稍显简单。
                    </span>

                    <span>
                      <p>扇柄</p>
                      通常需要与扇面相匹配，同时具有舒适手感和美观外观。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <p>常见材料：</p>
                      木材、竹子、骨质、象牙、玉石、贝壳、珠宝、金属、塑料等

                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>木材：</p>
                      木制扇柄是最常见的选择之一。各种硬木，如樟木、榉木、楠木等，都被用来制作扇柄。木制扇柄质地坚硬、手感舒适，而且可以通过雕刻、刻画等工艺加工出各种图案和纹理，赋予扇子独特的艺术感。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>竹子：</p>
                      与木制扇柄类似，竹制扇柄在一些地区也很常见。竹子轻巧、坚韧，适合用来制作轻便的扇柄，而且其天然的纹理和色彩也能为扇子增添一份自然的美感。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>金属：</p>
                      金属扇柄通常采用铜、铝等金属材料制作。金属扇柄坚固耐用，且具有现代感和工艺感，适合搭配一些时尚或者高档的扇子。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>塑料：</p>
                      塑料扇柄常用于廉价或者大批量生产的扇子中。塑料扇柄轻便、成本低廉，但相比于木材或金属，其手感可能稍显简单。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>骨质：</p>
                      骨制扇柄通常采用动物骨骼（如牛骨、羊骨）制作。骨质扇柄质地坚硬、光滑，具有一定的贵气和古朴感，常见于一些传统风格的扇子中。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>象牙：</p>
                      在古代，一些高档的扇子可能会采用象牙制作扇柄。然而，由于采集象牙对于野生大象的保护有害，因此现代多不再使用象牙。
                    </span>
                    <span>
                      <p>扇头</p>
                      也称作扇骨或扇骼，是支撑扇面的主要结构部件，其材料通常需要轻巧、坚固，并且能够支撑整个扇面的展开和收拢。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <p>常见材料：</p>
                      竹子，木材，骨质，玉石，贝壳，金属，塑料等。

                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>竹子</p>
                      竹子是传统团扇扇头的常见材料之一。竹子轻巧、坚韧，适合用来制作扇头。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>木材</p>
                      木制扇头也很常见，常用的木材包括樟木、榉木、楠木等。木头质地坚硬，适合用来支撑扇面，同时可以通过雕刻、刻画等工艺加工出各种图案和纹理。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>金属</p>
                      一些现代的团扇扇头可能采用金属材料，如铜、铝等。金属扇头通常坚固耐用，能够提供稳定的支撑结构，并且具有现代感和工艺感。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>塑料</p>
                      塑料扇头常用于大批量生产的扇子中。轻便、成本低廉，适合作为经济实惠的选择，耐用性可能稍差
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>骨质</p>
                      一些高档的团扇扇头可能采用动物骨骼（如牛骨、羊骨）制作。骨质扇头质地坚硬，具有一定的贵气和古朴感。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>玉石</p>
                      采用象牙、玉石、贝壳等特殊材料制作，用以制作高档、奢华或者装饰性的扇子。
                    </span>
                    <span>
                      <p>扇坠</p>
                      是团扇上悬挂的装饰品，用于增加美感和重量，使扇子更加稳定和优雅。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <p>常见材料：</p>
                      玉石、珠宝、金属、珍珠、玛瑙等半宝石、象牙等。

                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>玉石：</p>
                      玉石是一种传统的高档材料，常用于制作扇坠。玉石质地坚硬，色泽优美，具有独特的光泽和纹理，适合用来制作精致的扇坠。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>珠宝：</p>
                      豪华的团扇可能会配以珠宝扇坠，如钻石、翡翠、蓝宝石等。这些贵重的宝石能够为扇子增添奢华感和高贵气质。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>金属：</p>
                      金属扇坠通常采用黄金、白金、银等贵重金属制作。金属扇坠可以通过镶嵌、雕刻等工艺呈现出各种精美的图案和纹饰，展现出高雅的艺术品味。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>珍珠：</p>
                      珍珠是一种自然的有机宝石，常用于制作扇坠。珍珠具有圆润光滑的外观，闪烁着柔和的光泽，能够为扇子增添一份温柔和优雅。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>玛瑙半宝石</p>
                      ：除了贵重宝石外，一些半宝石如玛瑙、石榴石等也常被用于扇坠的制作。这些半宝石具有丰富的色彩和纹理，能够为扇子增添一份自然和鲜活的气息。
                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&dash;
                      <p>象牙：</p>
                      采用象牙、玉石、贝壳、琥珀等特殊材料制作，用以制作高档、奢华或者装饰性的扇子。
                    </span>
                  </div>
                  <div class="detail-footer">
                    <div class="show-btn">查看结构图</div>
                    <div class="chat-tip">点击上方按钮查看图示</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-right">
            <div class="img-container">
              <img src="../img/kind/shan.png" alt="" />
            </div>
            <div class="area-box">
              <div class="area-container">
                <div class="area area1">
                  <div class="area-left">扇面</div>
                  ----
                  <span class="area-right"></span>
                </div>
                <div class="area area2">
                  <div class="area-left">扇框</div>
                  ----
                  <span class="area-right"></span>
                </div>
                <div class="area area3">
                  <div class="area-left">扇柄</div>
                  ----
                  <span class="area-right"></span>
                </div>
                <div class="area area4">
                  <div class="area-left">扇头</div>
                  ----
                  <span class="area-right"></span>
                </div>
                <div class="area area5">
                  <div class="area-left">扇坠</div>
                  ----
                  <span class="area-right"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart">
        <div class="chart-container">
          <div class="chart-box"></div>
          <div class="tips">点击此处退出</div>
        </div>
      </div>
      <!-- people -->
      <div class="people active"></div>
      <!-- 这里吧右下角的竹子去了 -->
      <div class="zuzi"></div>
      <div class="zuzi2"></div>
      <div class="zuzi3"></div>
      <div class="lef-btn">
        <img src="../img/last-btn.png" alt="" />
        <img class="left-btn" src="../img/left-btn.svg" alt="" />
      </div>
      <div class="right-btn">
        <img src="../img/next-6-btn.png" alt="" />
        <img class="right-arr" src="../img/left-btn.svg" alt="" />
      </div>
    </div>
    <audio id="audio" loop>
      <source src="../audio/bacmusic3.MP3" />
    </audio>
  </body>
</html>

<script>
  (() => {
    window.onload = () => {
      initFollow();
      initCheck();
      // initChart();
      initChart2();
      initChatBOx();
      people();
      btn();
      initBody();
      initChangeLeft();
      initRoute();

      player();
      loclaMusic();
    };
  })();

  // 播放
  // 保存播放状态
  function loclaMusic() {
    // 从本地存储中获取保存的播放状态
    const savedPlaybackState = localStorage.getItem("playbackState");

    // 如果有保存的播放状态
    if (savedPlaybackState) {
      const playbackState = JSON.parse(savedPlaybackState);

      // 设置音频的播放位置
      audio.currentTime = playbackState.currentTime;

      // 如果播放状态为播放中，则继续播放音频
      if (playbackState.isPlaying) {
        audio.play();
      }
    }
  }

  // 保存播放状态到本地存储
  function savePlaybackState(isPlaying) {
    const playbackState = {
      currentTime: audio.currentTime,
      isPlaying: isPlaying,
    };

    localStorage.setItem("playbackState", JSON.stringify(playbackState));
  }

  function player() {
    let audio = document.getElementById("audio");
    let time = 0;
    let language = document.getElementById("language");
    audio.volume = 0.65;
    document.addEventListener("click", () => {
      audio.play();

      if (time == 0) {
        language.play();
        time++;
      }
    });
    // 结束 给人透明
    // 监听音频播放结束事件

    // 当音频播放或暂停时，保存播放状态到本地存储
    audio.addEventListener("play", () => {
      savePlaybackState(true);
    });

    audio.addEventListener("pause", () => {
      savePlaybackState(false);
    });

    // 当音频播放位置发生变化时，实时更新播放状态到本地存储
    audio.addEventListener("timeupdate", () => {
      savePlaybackState(true);
    });
  }

  function initChangeLeft() {
    
    let areas = document.querySelectorAll(".area");
    let rights = document.querySelectorAll(".area-right");
 
    rights.forEach((right, index) => {
   
      right.addEventListener("mouseenter", function () {
        areas[index].classList.add("active");
      });
      right.addEventListener("mouseleave", function () {
        areas[index].classList.remove("active");
      });
    });
  }

  function initRoute() {
    const lis = document.querySelectorAll(".header-right>ul > li");
    const home = document.querySelector(".logo");
    home.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
    lis.forEach((li, index) => {
      if (index !== 3) {
        li.addEventListener("mouseover", () => {
          lis[3].classList.remove("active");
        });
        li.addEventListener("mouseleave", () => {
          lis[3].classList.add("active");
        });
      }
    });
  }

  function initDetail(current) {
    const detailTitle = document.querySelector(".detail-title");
    const detailBody = document.querySelectorAll(".detail-body >span");
    const detailBodyContainer = document.querySelector(".detail-body");
    let textArr = ["扇面", "扇框", "扇柄", "扇头", "扇坠"];
    detailBody.forEach((box, index) => {
      detailTitle.innerText = textArr[current];
      detailBodyContainer.scrollTop = 0;
      if (index !== current) {
        box.classList.remove("active");
      } else {
        box.classList.add("active");
      }
    });
  }
  function initCheck() {
    const hots = document.querySelectorAll(".area-right");
    hots.forEach((hot, index) => {
      hot.addEventListener("mouseover", function () {
        initDetail(index);
      });
      hot.addEventListener("mouseleave", function () {
        initDetail(index);
      });
    });
  }

  function initChart2() {
    chartDom = document.querySelector(".chart-box");
    var myChart = echarts.init(chartDom);
    var option;

    var data = [
      {
        name: "扇面",
        itemStyle: {
          color: "#cc7e92",
        },
        children: [
          {
            name: "缂丝",
            value: 8,
            itemStyle: {
              color: "#e08aa0",
            },
            children: [
              {
                name: "织中之圣",
                value: 8,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },
          {
            name: "绫",
            value: 10,
            itemStyle: {
              color: "#cc7e92",
            },
            children: [
              {
                name: "花素绫",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "广绫",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "交织绫",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "尼棉绫",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },
          {
            name: "罗",
            value: 10,
            itemStyle: {
              color: "#e08aa0",
            },
            children: [
              {
                name: " 瓜子罗",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "孔雀罗",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "宝花罗",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "宝花花纹罗",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },
          {
            name: "刺绣",
            value: 8,
            itemStyle: {
              color: "#cc7e92",
            },
            children: [
              {
                name: "丝线刺绣",
                value: 4,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "羽毛刺绣",
                value: 4,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },
          {
            name: "真丝",
            value: 10,
            itemStyle: {
              color: "#e08aa0",
            },
            children: [
              {
                name: "桑蚕丝",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "柞蚕丝",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "蓖麻蚕丝",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "木薯蚕丝",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },
          {
            name: "欧根纱",
            value: 8,
            itemStyle: {
              color: "#cc7e92",
            },
            children: [
              {
                name: "涤纶",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "尼龙",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "人造丝",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },
          {
            name: "宣纸",
            value: 8,
            itemStyle: {
              color: "#e08aa0",
            },
            children: [
              {
                name: "生宣",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "半熟宣",
                value: 3,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "熟宣",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
            ],
          },

          {
            name: "绫",
            value: 8,
            itemStyle: {
              color: "#cc7e92",
            },
            children: [
              {
                name: "花素绫",
                value: 2,
                itemStyle: {
                  color: "#f99e1c",
                },
              },
              {
                name: "广绫",
                value: 2,
                itemStyle: {
                  color: "#ef5a78",
                },
              },
              {
                name: "交织绫",
                value: 2,
                itemStyle: {
                  color: "#f7f1bd",
                },
              },
              {
                name: "尼棉绫",
                value: 2,
                itemStyle: {
                  color: "#f7f1bd",
                },
              },
            ],
          },
        ],
      },
      {
        name: "扇框",
        itemStyle: {
          color: "#c96666",
        },
        children: [
          {
            name: "木材",
            value: 8,
            itemStyle: {
              color: "#dd7070",
            },
            children: [
              {
                name: "樟木",
                value: 3,
                itemStyle: {
                  color: "#3e0317",
                },
              },
              {
                name: "榉木",
                value: 3,
                itemStyle: {
                  color: "#e62969",
                },
              },
              {
                name: "楠木",
                value: 2,
                itemStyle: {
                  color: "#6569b0",
                },
              },
            ],
          },
          {
            name: "竹子",
            value: 8,
            itemStyle: {
              color: "#c96666",
            },
            children: [
              {
                name: "毛竹",
                value: 2,
                itemStyle: {
                  color: "#b53b54",
                },
              },
              {
                name: "罗汉竹",
                value: 2,
                itemStyle: {
                  color: "#a5446f",
                },
              },
              {
                name: "斑竹",
                value: 2,
                itemStyle: {
                  color: "#a5446f",
                },
              },
              {
                name: "湘妃竹",
                value: 2,
                itemStyle: {
                  color: "#a5446f",
                },
              },
            ],
          },
          {
            name: "玉石",
            value: 8,
            itemStyle: {
              color: "#dd7070",
            },
            children: [
              {
                name: "和田玉",
                value: 2,
                itemStyle: {
                  color: "#f2684b",
                },
              },
              {
                name: "青玉",
                value: 2,
                itemStyle: {
                  color: "#e73451",
                },
              },
              {
                name: "紫玉",
                value: 2,
                itemStyle: {
                  color: "#e65656",
                },
              },
              {
                name: "白玉",
                value: 2,
                itemStyle: {
                  color: "#f89a1c",
                },
              },
            ],
          },
          {
            name: "特殊",
            value: 8,
            itemStyle: {
              color: "#c96666",
            },
            children: [
              {
                name: "象牙",
                value: 4,
                itemStyle: {
                  color: "#f26355",
                },
              },
              {
                name: "贝壳",
                value: 4,
                itemStyle: {
                  color: "#e2631e",
                },
              },
            ],
          },
          {
            name: "金属",
            value: 8,
            itemStyle: {
              color: "#dd7070",
            },
            children: [
              {
                name: "铜",
                value: 4,
                itemStyle: {
                  color: "#b53b54",
                },
              },
              {
                name: "铝",
                value: 4,
                itemStyle: {
                  color: "#a5446f",
                },
              },
            ],
          },
          {
            name: "塑料",
            value: 8,
            itemStyle: {
              color: "#c96666",
            },
            children: [
              {
                name: "塑料",
                value: 8,
                itemStyle: {
                  color: "#f2684b",
                },
              },
            ],
          },
        ],
      },
      {
        name: "扇柄",
        itemStyle: {
          color: "#c5a571",
        },
        children: [
          {
            name: "木材",
            value: 8,
            itemStyle: {
              color: "#ebc586",
            },
            children: [
              {
                name: "樟木",
                value: 3,
                itemStyle: {
                  color: "#9ea718",
                },
              },
              {
                name: "榉木",
                value: 2,
                itemStyle: {
                  color: "#94a76f",
                },
              },
              {
                name: "楠木",
                value: 3,
                itemStyle: {
                  color: "#d0b24f",
                },
              },
            ],
          },
          {
            name: "竹子",
            value: 12,
            itemStyle: {
              color: "#c5a571",
            },
            children: [
              {
                name: "湘妃竹",
                value: 2,
                itemStyle: {
                  color: "#8f1c53",
                },
              },
              {
                name: "梅鹿竹",
                value: 2,
                itemStyle: {
                  color: "#b34039",
                },
              },
              {
                name: "棕竹",
                value: 2,
                itemStyle: {
                  color: "#ba9232",
                },
              },
              {
                name: "紫竹",
                value: 2,
                itemStyle: {
                  color: "#8b6439",
                },
              },
              {
                name: "罗汉竹",
                value: 2,
                itemStyle: {
                  color: "#8b6439",
                },
              },
              {
                name: "玉竹",
                value: 2,
                itemStyle: {
                  color: "#8b6439",
                },
              },
            ],
          },
          {
            name: "金属",
            value: 8,
            itemStyle: {
              color: "#ebc586",
            },
            children: [
              {
                name: "铜",
                value: 2,
                itemStyle: {
                  color: "#9ea718",
                },
              },

              {
                name: "铝",
                value: 2,
                itemStyle: {
                  color: "#d0b24f",
                },
              },
              {
                name: "银",
                value: 2,
                itemStyle: {
                  color: "#8eb646",
                },
              },
              {
                name: "金",
                value: 2,
                itemStyle: {
                  color: "#faef07",
                },
              },
            ],
          },
          {
            name: "塑料",
            value: 8,
            itemStyle: {
              color: "#c5a571",
            },
            children: [
              {
                name: "塑料",
                value: 8,
                itemStyle: {
                  color: "#8f1c53",
                },
              },
            ],
          },
          {
            name: "特殊",
            value: 8,
            itemStyle: {
              color: "#ebc586",
            },
            children: [
              {
                name: "象牙",
                value: 2,
                itemStyle: {
                  color: "#9ea718",
                },
              },

              {
                name: "骨质",
                value: 2,
                itemStyle: {
                  color: "#d0b24f",
                },
              },
              {
                name: "牛角",
                value: 2,
                itemStyle: {
                  color: "#8eb646",
                },
              },
              {
                name: "玳瑁",
                value: 2,
                itemStyle: {
                  color: "#faef07",
                },
              },
            ],
          },
        ],
      },
      {
        name: "扇头",
        itemStyle: {
          color: "#708f7f",
        },
        children: [
          {
            name: "竹子",
            value: 10,
            itemStyle: {
              color: "#83a795",
            },
            children: [
              {
                name: "湘妃竹",
                value: 2,
                itemStyle: {
                  color: "#a2bb2b",
                },
              },
              {
                name: "玉竹",
                value: 2,
                itemStyle: {
                  color: "#62aa3c",
                },
              },
              {
                name: "白竹",
                value: 2,
                itemStyle: {
                  color: "#03a653",
                },
              },
              {
                name: "棕竹",
                value: 2,
                itemStyle: {
                  color: "#038549",
                },
              },
              {
                name: "佛肚竹",
                value: 2,
                itemStyle: {
                  color: "#28b44b",
                },
              },
            ],
          },
          {
            name: "木材",
            value: 8,
            itemStyle: {
              color: "#708f7f",
            },
            children: [
              {
                name: "紫檀",
                value: 2,
                itemStyle: {
                  color: "#a2bb2b",
                },
              },
              {
                name: "红木",
                value: 2,
                itemStyle: {
                  color: "#62aa3c",
                },
              },
              {
                name: "鸡翅木",
                value: 2,
                itemStyle: {
                  color: "#03a653",
                },
              },
              {
                name: "楠木",
                value: 2,
                itemStyle: {
                  color: "#038549",
                },
              },
            ],
          },
          {
            name: "金属",
            value: 10,
            itemStyle: {
              color: "#83a795",
            },
            children: [
              {
                name: "金",
                value: 2,
                itemStyle: {
                  color: "#a2bb2b",
                },
              },
              {
                name: "银",
                value: 2,
                itemStyle: {
                  color: "#62aa3c",
                },
              },
              {
                name: "铜",
                value: 2,
                itemStyle: {
                  color: "#03a653",
                },
              },
              {
                name: "铁",
                value: 2,
                itemStyle: {
                  color: "#038549",
                },
              },
              {
                name: "铝",
                value: 2,
                itemStyle: {
                  color: "#038549",
                },
              },
            ],
          },
          {
            name: "塑料",
            value: 8,
            itemStyle: {
              color: "#708f7f",
            },
            children: [
              {
                name: "塑料",
                value: 8,
                itemStyle: {
                  color: "#9ea718",
                },
              },
            ],
          },

          {
            name: "骨质",
            value: 8,
            itemStyle: {
              color: "#83a795",
            },
            children: [
              {
                name: "牛角",
                value: 4,
                itemStyle: {
                  color: "#9ea718",
                },
              },

              {
                name: "羊角",
                value: 4,
                itemStyle: {
                  color: "#d0b24f",
                },
              },
            ],
          },
          {
            name: "玉石",
            value: 8,
            itemStyle: {
              color: "#708f7f",
            },
            children: [
              {
                name: "和田玉",
                value: 2,
                itemStyle: {
                  color: "#a2bb2b",
                },
              },
              {
                name: "青玉",
                value: 2,
                itemStyle: {
                  color: "#62aa3c",
                },
              },
              {
                name: "紫玉",
                value: 2,
                itemStyle: {
                  color: "#03a653",
                },
              },
              {
                name: "白玉",
                value: 2,
                itemStyle: {
                  color: "#038549",
                },
              },
            ],
          },
        ],
      },
      {
        name: "扇坠",
        itemStyle: {
          color: "#a8988d",
        },
        children: [
          {
            name: "珠宝",
            value: 8,
            itemStyle: {
              color: "#bfb2a1",
            },
            children: [
              {
                name: "钻石",
                value: 3,
                itemStyle: {
                  color: "#80a89d",
                },
              },
              {
                name: "翡翠",
                value: 3,
                itemStyle: {
                  color: "#def2fd",
                },
              },
              {
                name: "蓝宝石",
                value: 2,
                itemStyle: {
                  color: "#7a9bae",
                },
              },
            ],
          },
          {
            name: "玉石",
            value: 8,
            itemStyle: {
              color: "#a8988d",
            },
            children: [
              {
                name: "和田玉",
                value: 2,
                itemStyle: {
                  color: "#8b8c90",
                },
              },
              {
                name: "青玉",
                value: 2,
                itemStyle: {
                  color: "#beb276",
                },
              },
              {
                name: "紫玉",
                value: 2,
                itemStyle: {
                  color: "#fefef4",
                },
              },
              {
                name: "白玉",
                value: 2,
                itemStyle: {
                  color: "#744e03",
                },
              },
            ],
          },
          {
            name: "金属",
            value: 8,
            itemStyle: {
              color: "#bfb2a1",
            },
            children: [
              {
                name: "黄金",
                value: 3,
                itemStyle: {
                  color: "#8b8c90",
                },
              },
              {
                name: "白银",
                value: 3,
                itemStyle: {
                  color: "#beb276",
                },
              },
              {
                name: "白金",
                value: 2,
                itemStyle: {
                  color: "#fefef4",
                },
              },
            ],
          },
          {
            name: "特殊",
            value: 8,
            itemStyle: {
              color: "#a8988d",
            },
            children: [
              {
                name: "珍珠",
                value: 2,
                itemStyle: {
                  color: "#80a89d",
                },
              },
              {
                name: "象牙",
                value: 2,
                itemStyle: {
                  color: "#def2fd",
                },
              },
              {
                name: "贝壳",
                value: 2,
                itemStyle: {
                  color: "#7a9bae",
                },
              },
              {
                name: "琥珀",
                value: 2,
                itemStyle: {
                  color: "#039fb8",
                },
              },
            ],
          },
          {
            name: "半宝石",
            value: 8,
            itemStyle: {
              color: "#bfb2a1",
            },
            children: [
              {
                name: "玛瑙",
                value: 4,
                itemStyle: {
                  color: "#8b8c90",
                },
              },
              {
                name: "石榴石",
                value: 4,
                itemStyle: {
                  color: "#beb276",
                },
              },
            ],
          },
        ],
      },
    ];
    option = {
      title: {
        text: "结\n构\n材\n质\n示\n意\n图",
        // subtext: "团扇信息可视化",
        top: 200,
        left: 200,

        textStyle: {
          fontSize: 43,
          fontFamily: "font3",
          color: "#934845",
          align: "center",
          rotate: 40,
        },
        subtextStyle: {
          align: "center",
          fontSize: 30,
          fontFamily: "font3",
          color: "#c48a7a",
        },
        sublink: "https://worldcoffeeresearch.org/work/sensory-lexicon/",
      },
      series: {
        type: "sunburst",

        data: data,
        radius: [10, "80%"],

        sort: undefined,
        zoomToNodeRatio: 0.5, // 调整节点缩放比例
        emphasis: {
          focus: "ancestor",
        },
        levels: [
          {},
          {
            r0: "15%",
            r: "35%",
            itemStyle: {
              borderWidth: 2,
            },
            label: {
              rotate: "tangential",
              fontFamily: "font3",
              fontSize: 30,
              color: "black",
            },
          },
          {
            r0: "35%",
            r: "70%",
            label: {
              align: "right",
              fontFamily: "font3",
              fontSize: 30,
              color: "black",
            },
          },
          {
            r0: "70%",
            r: "72%",
            label: {
              position: "outside",
              padding: 3,
              fontFamily: "font3",
              fontSize: 21,
              color: "black",
              silent: false,
            },
            itemStyle: {
              borderWidth: 3,
            },
          },
        ],
      },
    };

    myChart.setOption(option);
  }

  function initChatBOx() {
    const btn = document.querySelector(".show-btn");
    const mainBody = document.querySelector(".main");
    const chart = document.querySelector(".chart");
    const tipsBtn = document.querySelector(".tips");
    btn.addEventListener("click", () => {
      mainBody.classList.toggle("active");
      chart.classList.toggle("active");
    });
    tipsBtn.addEventListener("click", () => {
      mainBody.classList.toggle("active");
      chart.classList.toggle("active");
    });
  }

  // 人
  function people() {
    // 眨眼
    const people = document.querySelector(".people");
    let blank_index = 0;
 
    timeout = 4000;
    let blink = () => {
      if (blank_index == 2) {
        blank_index = 0;
        timeout = 4000;
      } else {
        blank_index += 1;
        timeout = 40;
      }
      people.style.backgroundImage = `url(../img/people/精灵-${blank_index}.png)`;
      setTimeout(() => {
        blink();
      }, timeout);
    };
    blink();
  }

  // 按钮
  function btn() {
    const leftBtn = document.querySelector(".lef-btn");
    
    const rightBtn = document.querySelector(".right-btn");
    leftBtn.addEventListener("click", () => {
      window.location.href = "./kind.html";
    });
    rightBtn.addEventListener("click", () => {
      window.location.href = "../index.html";
    });
  }
  function initFollow() {
    const follower = document.querySelector("#follower");
    window.addEventListener("mousemove", (event) => {
      const mouseX = event.clientX;
      const mouseY = event.clientY;
      // 计算偏移量，使 follower 在鼠标中心
      const offsetX = mouseX - follower.offsetWidth / 3;
      const offsetY = mouseY - follower.offsetHeight / 3;
      // 设置 follower 的位置
      follower.style.left = `${offsetX}px`;
      follower.style.top = `${offsetY}px`;
    });
  }

  function initBody() {
    const main = document.querySelector(".main");
    setTimeout(() => {
      main.style.opacity = "1";
    }, 5);
  }

  function peopleOpacity() {
    const people = document.querySelector(".people");
    setTimeout(() => {
      people.classList.remove("active");
    }, 3000);
  }
</script>
